<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            /*display: inline-block;*/
            width: 200px;
            height: 200px;
            line-height: 200px;
            border: 1px solid #000;
            text-align: center;


        }

        /* css 规则： 把具有共性的部分提取出来，形成一个一个的单独的类，一般般我们称之为原子类。具有特性，单独的通过类名进行作用*/

        /* 浮动的特性 语法： float 元素浮动的时候，需要注意*/
        /*1. 浮动的方向： left  right*/
        /*2. 如果要浮动，相关元素要一起浮动*/
        .box1{

            width: 300px;
            height: 400px;
            
            border-color: red;
            float: left;

        }
        .box2{
            width: 100px;
            height: 200px;
            float: left;

        }
    </style>
</head>
<body>

    <h1>浮动布局-左浮动</h1>

    <div class="box1 box">盒子1</div>

    <div class="box2 box">盒子2</div>

</body>
</html>